import { Graph, Path } from '@antv/x6';
import { h } from 'vue';
import '@antv/x6-vue-shape'
import { useTeleport } from '@antv/x6-vue-shape'
import MetricsNode from './metricsNode';
import SymbolNode from './symbolNode';


export const indexGraphViewId = 'index-graph-view-id'

Graph.registerNode(
    'metricsNode',
    {
      inherit: 'vue-shape',
      view: indexGraphViewId,
      x: 303,
      y: 100,
      width: 303,
      height: 91,
      component: {
        render: () => h(MetricsNode),
      },
    },
    true,
)
Graph.registerNode(
  'symbolNode',
  {
      inherit: 'vue-shape',
      view: indexGraphViewId,
      x: -229,
      y: 81,
      width: 38,
      height: 38,
      component: {
          render: () => h(SymbolNode),
        },
  },
  true,
)

// 这个是为了提升自定义节点渲染性能的
export const TeleportContainer = useTeleport(indexGraphViewId)
// 连接器
Graph.registerConnector(
  'bpmn',
  (sourcePoint, targetPoint, routerPoints, options) => {
    const midX = sourcePoint.x + 10
    const midY = sourcePoint.y
    const ctrX = (targetPoint.x - midX) / 5 + midX
    const ctrY = targetPoint.y
    const pathData = `
     M ${sourcePoint.x} ${sourcePoint.y}
     L ${midX} ${midY}
     Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
    `
    return options.raw ? Path.parse(pathData) : pathData
  },
  true,
)

// 边
// Graph.registerEdge(
//   'mindmap-edge',
//   {
//     inherit: 'edge',
//     // connector: { name: 'smooth' },
    // attrs: {
    //   line: {
    //     stroke: '#9B9FAB',
    //     strokeWidth: 1,
    //     // strokeDasharray: 2,
    //     targetMarker: {
    //       name: 'block',
    //       targetMarker: 'block',
    //       width: 6,
    //       height:6,
    //     },
    //   },
    // },
//     zIndex: 0,
//   },
//   true,
// )

Graph.registerEdge(
  'bpmn-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: '#9B9FAB',
        strokeWidth: 1,
        // strokeDasharray: 2,
        targetMarker: {
          name: 'block',
          targetMarker: 'block',
          width: 6,
          height:6,
        },
      },
    },
    zIndex: 0,
  },
  true,
)